<template>
  <div class="container full-screen flex">
    <el-card class="card" shadow="hover">
      <div class="head primary text-center">
        <h2>用户认证</h2>
      </div>
      <el-form
          :model="student"
          ref="student"
          :rules="student_rule"
          style="margin-top: 20px"
      >
        <el-form-item prop="name">
          <el-input
              v-model="student.name"
              placeholder="姓名"
              prefix-icon="iconfont iconuser"
          ></el-input>
        </el-form-item>
        <el-form-item prop="idNumber">
          <el-input
              v-model="student.idNumber"
              :disabled="change"
              prefix-icon="iconfont iconid-card-o"
              placeholder="身份证号"
          ></el-input>
        </el-form-item>
        <el-form-item prop="sex">
          <el-select
              v-model="student.sex"
              placeholder="请选择性别"
              style="width: 100%"
          >
            <el-option label="男" value="男"></el-option>
            <el-option label="女" value="女"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item prop="college">
          <el-input
              v-model="student.college"
              placeholder="学院"
              prefix-icon="iconfont icontel2"
          ></el-input>
        </el-form-item>

        <el-form-item prop="major">
          <el-input
              v-model="student.major"
              placeholder="专业"
              prefix-icon="iconfont iconpeople1"
          ></el-input>
        </el-form-item>

        <el-form-item prop="major">
          <el-input
              v-model="student.uClass"
              placeholder="班级"
              prefix-icon="iconfont iconpeople1"
          ></el-input>
        </el-form-item>

        <el-form-item prop="sex">
          <el-select
              v-model="student.sex"
              placeholder="请选择老师"
              style="width: 100%"
          >
            <el-option v-for="(item,index) of teacherList" :label="item.name" :value="item.uid">{{ item.name + item.mobile }}</el-option>
          </el-select>
        </el-form-item>

      </el-form>
      <el-button
          type="primary"
          :loading="authLoading"
          @click="onSubmit"
          style="width: 100%"
      >提交
      </el-button>
    </el-card>
  </div>
</template>

<script>
import { checkIdNumber} from "/src/utils/validator.js";
import { auth } from "/src/network/account";
import { getTeachers } from "/src/network/teacher";

export default {
  name: "Auth",
  components: {},
  data() {
    return {
      identity: this.$route.params.identity,
      change: false,
      student: {
        name: "",
        sex: "",
        idNumber: "",
        major: "",
        college: "",
        uClass:""
      },
      teacherList:[],
      mobile:'',
      student_rule: {
        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        sex:[{ required: true, message: "请输入手机号", trigger: "blur" }],
        idNumber: [
          { required: true, validator: checkIdNumber, trigger: "blur" },
        ],
        major: [{ required: true, message: "请输入住址", trigger: "blur" }],
        college:[{ required: true, message: "请输入住址", trigger: "blur" }]
      },
      authLoading: false,
    };
  },
  created() {
    if (this.$route.params.mobile===undefined){
      this.$message({
        type: 'error',
        message: '请重新登录',
      })
      this.$router.push({
        name: 'Login',
      })
    }
    else{
      console.log(this.$route.params)
      this.mobile = this.$route.params.mobile
      getTeachers().then(res=>{
        this.teacherList = res.data
      },err=>{})
      console.log(this.$route.params)
    }
  },
  mounted() {

  },
  methods: {
    onSubmit() {
      this.$refs.student.validate((valid) => {
        if (valid) {
          this.submit(this.student);
        }
      });
    },
    submit(data) {
      this.authLoading = true;
        auth(this.mobile,data).then((res) => {
          if (res.code === 200) {
            this.registerLoading = false;
            this.$message.success("认证成功");
            this.$router.replace({
              name: "Home",
            });
          }
        });

    },
  },
};
</script>

<style scoped>
.container {
  background: url(/img/bg.jpg);
  background-size: cover;
  flex-direction: column;
  align-items: center;
}

.head {
  letter-spacing: 4px;
}

.card {
  width: 450px;
  margin: auto;
}
</style>
